<template>
  <h1>1.组件的基本写法</h1>
  fullname:{{fullname}}
  <button @click="changeName">修改名字</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
  import {ref,computed} from 'vue'
  let firstname = ref('李')
  let lastname = ref('四')
  let fullname = computed({
    get(){
      return firstname.value + ' ' + lastname.value
    },
    set(val){
      firstname.value = val.split(' ')[0]
      lastname.value = val.split(' ')[1]
    }
  })
  const changeName = () => {
    fullname.value = '张 三'
  }
</script>